理解WebXR参考空间变换：深入探究坐标系

WebXR为直接在浏览器中创建令人惊叹的虚拟和增强现实体验打开了大门。然而，要精通WebXR，就需要对参考空间和坐标变换有扎实的理解。本指南全面概述了这些概念，助您构建沉浸式且精确的VR/AR应用。

什么是WebXR参考空间？

在现实世界中，我们对物体的位置有共识。但在虚拟世界中，我们需要一种方法来定义坐标系，以关联虚拟对象、用户和环境。这就是参考空间的作用。参考空间定义了虚拟世界的原点和方向，为定位虚拟对象和跟踪用户移动提供了一个框架。

可以这样想：想象一下您正在向某人描述一辆玩具车的位置。您可能会说：“它在您前方两英尺，左侧一英尺。”您已经隐式地定义了一个以听者为中心的参考空间。WebXR参考空间为您的虚拟场景提供了类似的锚点。

WebXR中的参考空间类型

WebXR提供了几种类型的参考空间，每种都有其自身的特点和用例：

• 观察者空间 (Viewer Space): 此空间以用户的眼睛为中心。它是一个相对不稳定的空间，因为它会随着用户头部的移动而不断变化。它最适合用于头部锁定的内容，如平视显示器（HUD）。
• 本地空间 (Local Space): 此空间提供了一个稳定的、相对于屏幕的视图。原点相对于显示设备是固定的，但用户仍然可以在该空间内移动。它适用于就座或固定的体验。
• 本地地面空间 (Local Floor Space): 与本地空间类似，但原点位于地板上。这对于创建用户站立并在有限区域内行走的体验非常理想。初始离地高度通常由用户的设备校准决定，WebXR系统会尽力将此原点维持在地板上。
• 有界地面空间 (Bounded Floor Space): 这是本地地面空间的扩展，它定义了一个用户可以移动的有界区域（一个多边形）。它有助于防止用户漫游到跟踪区域之外，这在实际物理环境未被仔细映射的空间中尤为重要。
• 无界空间 (Unbounded Space): 此空间没有边界，允许用户在现实世界中自由移动。它适用于大规模的VR体验，例如在虚拟城市中行走。然而，它需要更强大的跟踪系统。这通常用于AR应用，用户可以在现实世界中自由移动，同时看到虚拟对象叠加在他们的真实世界视图上。

理解坐标系

坐标系定义了在参考空间内如何表示位置和方向。WebXR使用右手坐标系，这意味着正X轴指向右侧，正Y轴指向上方，正Z轴指向观察者。

理解坐标系对于在虚拟场景中正确定位和定向对象至关重要。例如，如果您想将一个对象放置在用户前方一米处，您需要将其Z坐标设置为-1（请记住，Z轴指向观察者）。

WebXR使用米作为标准度量单位。在与可能使用不同单位（例如厘米或英寸）的3D建模工具或库一起工作时，记住这一点很重要。

坐标变换：定位和定向对象的关键

坐标变换是将位置和方向从一个坐标系转换到另一个坐标系的数学运算。在WebXR中，变换对于以下方面至关重要：

• 相对于用户定位对象： 将对象的位置从世界空间（全局坐标系）转换到观察者空间（用户的头部位置）。
• 正确定向对象： 确保对象朝向正确的方向，无论用户的方向如何。
• 跟踪用户的移动： 根据传感器数据更新用户视点的位置和方向。

表示坐标变换最常见的方法是使用4x4变换矩阵。该矩阵将平移（位置）、旋转（方向）和缩放组合成一个单一、高效的表示。

变换矩阵解析

一个4x4变换矩阵如下所示：

[ R00 R01 R02 Tx ]
[ R10 R11 R12 Ty ]
[ R20 R21 R22 Tz ]
[  0   0   0  1  ]

其中：

• R00-R22: 代表旋转分量（一个3x3旋转矩阵）。
• Tx, Ty, Tz: 代表平移分量（沿X、Y和Z轴移动的量）。

要使用变换矩阵变换一个点 (x, y, z)，您可以将该点视为一个4D向量 (x, y, z, 1)，然后将其与矩阵相乘。结果向量表示该点在新坐标系中的变换后位置。

大多数WebXR框架（如Three.js和Babylon.js）提供了处理变换矩阵的内置函数，使得执行这些计算更加容易，而无需手动操作矩阵元素。

在WebXR中应用变换

让我们来看一个实际的例子。假设您想在用户眼前一米处放置一个虚拟立方体。

1. 获取观察者姿态： 使用 XRFrame 接口获取观察者在所选参考空间中的当前姿态。
2. 创建变换矩阵： 创建一个表示立方体相对于观察者的期望位置和方向的变换矩阵。在这种情况下，您可能会创建一个沿负Z轴（朝向观察者）移动立方体一米的平移矩阵。
3. 应用变换： 将立方体的原始变换矩阵（表示其在世界空间中的位置）与新的变换矩阵（表示其相对于观察者的位置）相乘。这将更新立方体在场景中的位置。

这是一个使用Three.js的简化示例：

const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

// Inside the animation loop:
const xrFrame = session.requestAnimationFrame( (time, frame) => {
  const pose = frame.getViewerPose(referenceSpace);

  if ( pose ) {
    const position = new THREE.Vector3(0, 0, -1); // 1 meter in front
    position.applyMatrix4( new THREE.Matrix4().fromArray( pose.transform.matrix ) );
    cube.position.copy(position);

    const orientation = new THREE.Quaternion().fromArray(pose.transform.orientation);
    cube.quaternion.copy(orientation);
  }
});

此代码片段获取观察者的姿态，创建一个表示立方体期望位置（前方1米）的向量，将观察者的变换矩阵应用于该位置，然后更新立方体在场景中的位置。它还将观察者的方向复制到立方体上。

实践示例：场景与解决方案

让我们探讨一些常见场景以及如何使用参考空间变换来解决它们：

1. 创建一个固定在用户手腕上的虚拟控制面板

想象一下，您想创建一个始终可见并固定在用户手腕上的虚拟控制面板。您可以使用相对于观察者的参考空间（或计算相对于控制器的变换）。以下是您可能采取的方法：

1. 使用观察者空间或控制器空间： 请求一个 viewer 或 `hand` 参考空间，以获得相对于用户头部或手部的姿态。
2. 创建变换矩阵： 定义一个将控制面板定位在手腕略上方和前方的变换矩阵。
3. 应用变换： 将控制面板的变换矩阵乘以观察者或控制器的变换矩阵。这将使控制面板在用户移动头部或手部时锁定在用户手腕上。

这种方法常用于VR游戏和应用中，为用户提供方便易用的界面。

2. 在AR中将虚拟对象锚定到真实世界表面

在增强现实中，您通常希望将虚拟对象锚定到真实世界的表面，例如桌子或墙壁。这需要一种更复杂的方法，涉及到检测和跟踪这些表面。

1. 使用平面检测： 使用WebXR平面检测API（如果设备支持）来识别用户环境中的水平和垂直表面。
2. 创建锚点： 在检测到的表面上创建一个 XRAnchor。这在现实世界中提供了一个稳定的参考点。
3. 相对于锚点定位对象： 相对于锚点的变换矩阵来定位虚拟对象。这将确保即使在用户四处移动时，对象也能保持附着在表面上。

ARKit (iOS) 和 ARCore (Android) 提供了强大的平面检测功能，可以通过WebXR设备API进行访问。

3. VR中的传送

传送是VR中常用的一种技术，允许用户在大型虚拟环境中快速移动。这涉及到将用户的视点从一个位置平滑地过渡到另一个位置。

1. 获取目标位置： 确定传送的目标位置。这可以基于用户输入（例如，点击环境中的一个点）或预定义的位置。
2. 计算变换： 计算表示将用户从当前位置移动到目标位置所需的位置和方向变化的变换矩阵。
3. 应用变换： 将变换应用于参考空间。这将立即将用户移动到新位置。可以考虑使用平滑的动画使传送感觉更舒适。

使用WebXR参考空间的最佳实践

以下是使用WebXR参考空间时需要牢记的一些最佳实践：

• 选择正确的参考空间： 选择最适合您应用的参考空间。考虑您正在创建的体验类型（例如，就座、站立、房间尺度）以及所需的准确性和稳定性水平。
• 处理跟踪丢失： 准备好处理跟踪丢失或变得不可靠的情况。如果用户移出跟踪区域或环境光线不足，就可能发生这种情况。向用户提供视觉提示，并考虑实施后备机制。
• 优化性能： 坐标变换的计算成本可能很高，尤其是在处理大量对象时。优化您的代码，以最小化每帧需要执行的变换次数。使用缓存和其他技术来提高性能。
• 在不同设备上测试： WebXR的性能和跟踪质量在不同设备之间可能存在显著差异。在多种设备上测试您的应用，以确保它对所有用户都能良好运行。
• 考虑用户身高和瞳距（IPD）： 考虑不同的用户身高和瞳孔间距（IPD）。根据用户身高正确设置相机高度将使体验更加舒适。调整IPD可确保立体渲染对每个用户都是准确的，这对于视觉舒适度和深度感知非常重要。WebXR提供了用于访问用户估计IPD的API。

高级主题

一旦您对WebXR参考空间和坐标变换的基础知识有了扎实的理解，您就可以探索更高级的主题，例如：

• 姿态预测： WebXR提供了用于预测用户头部和控制器未来姿态的API。这可用于减少延迟并提高应用的响应能力。
• 空间音频： 坐标变换对于创建逼真的空间音频体验至关重要。通过在3D空间中定位音频源并相对于用户头部变换其位置，您可以创造出沉浸感和存在感。
• 多用户体验： 在创建多用户VR/AR应用时，您需要在虚拟世界中同步所有用户的位置和方向。这需要对参考空间和坐标变换进行仔细管理。

WebXR框架和库

有几个JavaScript框架和库可以简化WebXR开发，并为处理参考空间和坐标变换提供更高级别的抽象。一些流行的选择包括：

• Three.js: 一个广泛使用的3D图形库，为创建WebXR应用提供了一套全面的工具。
• Babylon.js: 另一个流行的3D引擎，提供出色的WebXR支持和丰富的功能集。
• A-Frame: 一个声明式框架，使得使用类似HTML的语法创建WebXR体验变得容易。
• React Three Fiber: 一个用于Three.js的React渲染器，允许您使用React组件构建WebXR应用。

结论

理解WebXR参考空间和坐标变换对于创建沉浸式且精确的VR/AR体验至关重要。通过掌握这些概念，您可以释放WebXR API的全部潜力，并构建推动沉浸式网络边界的引人注目的应用。随着您深入WebXR开发，请继续尝试不同的参考空间和变换技术，以找到满足您特定需求的最佳解决方案。记住要为性能优化代码，并在多种设备上进行测试，以确保为所有用户提供流畅且引人入胜的体验。